<template>
  <div class="swiper-container">
    <div class="swiper-padding">
      <div class="swiper-box">
        <div class="swiper-item" v-for="(item, index) in swiperData" :key="index" :data-id="item.id" @touchstart="touchstart" @touchmove="touchmove" @touchcancel="touchcancel" @touchend="touchend"  :animation="item.animationData">
          <div class="swiper-item-imgBox">
            <img mode="aspectFill" :src="item.img" alt="" srcset="">
          </div>
          <div class="swiper-item-nameBox">
            <div class="name">{{item.name}}</div>
            <div class="des">{{item.des}}</div>
          </div>
        </div>                  
      </div>
      <div class="swiper-item-footer">
        <button @click="prev" class="button"><i class="prev"></i><span class="text-hidden">prev</span></button>
        <button @click="next" class="button"><i class="next"></i><span class="text-hidden">next</span></button>
        <!-- <button></button> -->
      </div>
    </div>
  </div>
</template>

<script>
    import {
      swiperList,
      swiperList2
    } from '@/mock/swiperData';
    export default {
      data() {
        return {
          windowWidth: 0,
          windowHeight: 0,
          x_start: 0,
          y_start: 0,
          index: 0,
          top: 0,
          left: 0,
          swiperData: swiperList,
          currentData: '' //目前能看到页面的数据
        }
      },
      created() {
        let that = this;
        wx.getSystemInfo({
            success: function(res) {
                that.windowWidth = res.windowWidth;
                that.windowHeight = res.windowHeight;
                that.currentData = swiperList[swiperList.length - 1]
            }
        })        
      },
      mounted() {
        console.log('swiperList', swiperList);
        //创建动画
        let animation = wx.createAnimation({
          transformOrigin: "50% 50%",
          duration: 0,
          timingFunction: "ease",
          delay: 0
        })
        this.animation = animation;
      },
      methods: {
        touchstart(event) { //touchstart
          console.log('touchstart', event);
          this.x_start = event.touches[0].pageX;
          this.y_start = event.touches[0].pageY;
        },
        touchmove(event) { //touchmove
          let left_ = (event.touches[0].pageX) - (this.x_start);
          let top_ = (event.touches[0].pageY) - (this.y_start);
          let data_id = event.currentTarget.dataset.id;
          let data_index = this.swiperData.findIndex(data => {
            return data.id === data_id
          })

          this.animation.translate3d(left_, top_, 0).step();

          this.left = left_;
          this.top = top_;

          this.swiperData[data_index].animationData = this.animation.export();
        },
        touchcancel(event) { //touchcancel
          console.log('touchcancel', event);
        },
        touchend(event) { //touchend
          console.log('touchend', event);
          let x_end = event.mp.changedTouches[0].pageX;
          let y_end = event.mp.changedTouches[0].pageY;
          let data_id = event.mp.currentTarget.dataset.id;
          console.log('data_id', data_id);
          if (this.left > 0 && (this.left > (this.windowWidth / 2 - 10))) {
            console.log('right_________________________');
            this.swiperToRight(data_id)
          } else if (this.left < 0 && this.left < ((-this.windowWidth / 2) + 10)) {
            console.log('left_________________________');
            this.swiperToLeft(data_id)
          } else {
            console.log('Reset_________________________');
            this.swiperReset(data_id)
          }
        },
        swiperToRight(data_id) { //滑到最右边
          let that = this;
          that.swiperAnimation(data_id, 1)
        },
        swiperReset(data_id) { //未滑到指定位置，重置回原点
          this.animation.option.transition.duration = 300;
          this.animation.translate3d(0, 0, 0).step();
          let data_index = this.swiperData.findIndex(data => {
            return data.id === data_id
          })
          this.swiperData[data_index].animationData = this.animation.export();

          setTimeout(() => {
            this.animation.option.transition.duration = 0;
            this.swiperData[data_index].animationData = this.animation.export();
          }, 300);
        },
        swiperToLeft(data_id) { //滑到最左边     
          this.swiperAnimation(data_id, -1)
        },
        swiperAnimation(data_id, dir) { //滑啊滑，滑到外婆桥
          let that = this;
          let data_index = that.swiperData.findIndex(data => {
            return data.id === data_id
          })
          that.animation.option.transition.duration = 300;
          that.animation.translate3d(dir * that.windowWidth, that.top * 2.2, 0).step();
          that.swiperData[data_index].animationData = that.animation.export()
          that.currentData = that.swiperData[(data_index - 1)];

          setTimeout(() => {
            this.animation.option.transition.duration = 0;
          }, 300);

          if (data_index == that.index) {
            swiperList2.forEach(element => {
              element.animationData = that.animation.export();
              that.swiperData.push(element)
            });
            that.index = that.index + 10;
            that.currentData = that.swiperData[(data_index - 1) + 20];
          }
        },
        prev() {
          let currentDataId = this.currentData.id;
          this.swiperAnimation(currentDataId, -1)
        },
        next() {
          let currentDataId = this.currentData.id;
          this.swiperAnimation(currentDataId, 1)
        }
      }
    }
</script>

<style lang="scss" scoped>
  div {
    box-sizing: border-box;
  }

  .swiper-container {
    width: 100%;
    height: 100vh;
    position: relative;
    .swiper-padding {
      width: 100%;
      height: 100%;
      padding: 30rpx;
      .swiper-box {
        position: relative;
        width: 100%;
        height: 120vw;
        .swiper-item {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background-color: #ffffff;
          border-radius: 5px;
          box-shadow: 0 0 5px #CCC;
          text-align: center;
          z-index: 1;
          .swiper-item-imgBox{
            width: 100%;
            height: 100vw;
            image{
              width: 100%;
              height: 100%;
            }
          }
          .swiper-item-nameBox{
            width: 100%;
            text-align: left;
            padding: 30rpx;
            height: 20vw;
            overflow: hidden;
            .name{
              font-size: 32rpx;
              font-weight: bold;
            }
            .des{
              font-size: 24rpx;
              color: #888;
            }
          } 
        }
      }
      .swiper-item-footer{
        position: relative;
        width: 100%;
        text-align: center;
        display:flex;
        display: -webkit-flex; 
        justify-content:space-around;
        margin: 0 auto;
        margin-top: 100rpx;
        z-index: 1;
        .button {
          border: none;
          background: none;
          position: relative;
          display: flex;
          cursor: pointer;
          font-size: 16px;
          width: 100rpx;
          height: 100rpx;
          z-index: 100;
          -webkit-tap-highlight-color: rgba(0,0,0,0);
          border-radius: 100rpx;
          outline: none;
          background: #fff;
          align-items: center;
          justify-content: center;
          box-shadow: 0 0 5px #CCC;
          .next{
            display: inline-block;
            width: 20rpx;
            height:10rpx;
            background: rgb(129,212,125);
            line-height: 0;
            font-size:0;
            vertical-align: middle;
            -webkit-transform: rotate(45deg);
            left: -10rpx;
            top: 4rpx;
            position: relative;
          }
          .next:after{
            content:'/';
            display:block;
            width: 40rpx;
            height:10rpx;
            background: rgb(129,212,125);
            -webkit-transform: rotate(-90deg) translateY(-50%) translateX(50%);
          }
          .prev{
            display: inline-block;
            width: 40rpx;
            height:10rpx;
            background: rgb(230,104,104);
            line-height: 0;
            font-size:0;
            vertical-align: middle;
            -webkit-transform: rotate(45deg);
          }
          .prev:after{
            content:'/';
            display:block;
            width: 40rpx;
            height:10rpx;
            background: rgb(230,104,104);
            -webkit-transform: rotate(-90deg);
          }
        }
        .button::after{ border: none; }
        .text-hidden {
            position: absolute;
            overflow: hidden;
            width: 0;
            height: 0;
            color: transparent;
            display: block;
        }
      }
    }
  }
</style>